<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="widgetAppBackgroundColour" content="black" />
        
		<script type="text/javascript">
			
			var MINI_VIEW_TRESHOLD = 150;
			function isMiniView() {
				return window.innerHeight < MINI_VIEW_TRESHOLD;
			}
			
			var phone = true;
			if (!window.widget) { // not in phone
				phone = false;
				widget = {
				  preferenceForKey: function(key) { return null; },
				  setPreferenceForKey: function(val, key) {},
				  performTransition: function() {},
				  prepareForTransition: function(eff) {},
				  setDisplayLandscape: function() {},
				  setDisplayPortrait: function() {},
				  openURL: function(url) {
						window.location = url;
				  },
				  setNavigationEnabled: function(enabled) {},
				};
				menu = {
					setRightSoftkeyLabel: function(l,cb) { debug_rightkey(l, cb); },
					clear: function() {},
					hideSoftkeys: function() {},
					showSoftkeys: function() {}
				};
			}
			
			widget.setDisplayLandscape();
			window.menu.hideSoftkeys();
			widget.setNavigationEnabled( false );
			
			window.widget.onshow = function() {widget.setDisplayLandscape();}
		</script>

        <link href="reset.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
		<link href="design.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="startup.js"></script>
	</head>
	
    <body>

	<div id="page">
	<div id="static_startup">
		<a href="#" id="exit_button_splash" class="top_icon right exit vibra" onclick="window.close();"></a>
		<div class="startup_positioner">
			<img id="splash_img" src="img/splash.png" style="display:none" onload="javascript:if (!isMiniView())this.style.display='inline-block';startup();" onerror="javascript:startup();"/>
		</div>
	</div>
	
	<div id="content_container">	
	
		<!-- "alert" popup -->
        <div id="alert" class="popup_loader alert hidden">
            <div class="loader_positioner">
                <table class="alert_table">
                    <tr><td class="alert_corner nw"></td><td class="alert_top_border"></td><td  class="alert_corner ne"></td></tr> <!-- top row -->
                    <tr><td class="alert_left_border"></td> <!-- middle row -->
					<td class="popup_content">
						<div class="content_text"></div>
						<div class="alert_buttons">
							<a id="alert_ok" class="button vibra" href="#">
								<div class="button_text">Ok</div>
							</a>
							<a id="alert_cancel" class="button vibra" href="#">
								<div class="button_text">Cancel</div>								
							</a>
						</div>
					</td>
                    <td class="alert_right_border"></td></tr>
                    <tr><td class="alert_corner sw"></td><td class="alert_bottom_border"></td><td class="alert_corner se"></td></tr> <!-- bottom row -->
                </table>
			</div>
		</div>
		<!-- end of "alert" -->
		
        <!-- "video_container" screen -->
		<div id="video_container" class="">
			<div class="top_line">
				
				<span id="bar_network_indicator" class="network_indicator"></span>
				<div class="logo_container" onclick="selectFirstTab();"></div>
				
				<a href="#" id="exit_button" class="top_icon right exit vibra" onclick="exit()"></a>
				<a href="#" id="right_menu" class="top_icon right menu vibra"></a>
				
				<div class="tabs_arrow" id="tabs_arrow_left"></div>
				<div id="tabs_container" class="tabs_container">					
					<div class="tabs" id="tabs">
					</div>
					<div class="hide_scroller"></div>                
				</div>
				<div class="tabs_arrow right" id="tabs_arrow_right"></div>
	            
				<div id="horizontalSeparator"></div>
				
	    	</div>
	        
	        <!-- "content" screen -->
	        <div class="content">
	        	<div class="whats_new" id="whats_new">
	                <div class="items_container">
	                	<div class="items_scroller" id="items_scroller">
	                    	<table>
	                    		<tr id="items_container"></tr>                                                   
							</table>
						</div>
	                </div>
	            </div>
				
				<!-- "description" screen -->
	        	<div class="description_screen hidden" id="description_screen">
					<a id="btn_hide_description" class="btn_back vibra" href="#" onclick="hideDescription();"></a>
					<div id="description_left" class="description_left">
	                	<div id="description_img" class="item_image"></div>
						<div id="description_duration" class="description_duration"></div>							
					</div>
                	<div id="description_right" class="description_right">
                		<h1 id="description_title" class="description_title">
                    	</h1>
						<div id="description_subtitle" class="description_subtitle">
                    	</div>
						<div id="description_text" class="description_text">
                    	</div>
                    </div>
	                
	            </div> <!-- end of "description" screen -->
				
				<!-- "episodes" screen -->
	        	<div class="episodes_screen hidden" id="episodes_screen">
	        		<a id="btn_hide_episodes" class="btn_back vibra" href="#" onclick="hideEpisodes();"></a>
					<div id = "episodes_title" class="episodes_title"></div>
					<div class="items_container">
	                	<div class="items_scroller" id="items_scroller">
	                    	<table>
	                    		<tr id="episodes_container"></tr>                                                   
							</table>
						</div>
	            	</div>	                
	            </div> <!-- end of "episodes" screen -->

	            <!-- "search" screen -->				
				<div id="search_screen" class="popup_loader alert hidden">
		            <div class="loader_positioner">
		                <table class="alert_table">
		                    <tr><td class="alert_corner nw"></td><td class="alert_top_border"></td><td  class="alert_corner ne"></td></tr> <!-- top row -->
		                    <tr><td class="alert_left_border"></td> <!-- middle row -->
							<td class="popup_content">
								<table id="search_form"><tr>
									<td><a id="btn_hide_search" class="btn_back vibra" href="#"></a></td>
			                        <td><input type="text" value="Search text..." id="search_text" /></td>
			                        <td><a id="search_btn" class="button vibra" href="#">
			                            <div id="search_btn_text" class="button_text">Search</div>
			                        </a></td>
			                    </tr></table>
			                    <div id="search_error"></div>
							</td>
		                    <td class="alert_right_border"></td></tr>
		                    <tr><td class="alert_corner sw"></td><td class="alert_bottom_border"></td><td class="alert_corner se"></td></tr> <!-- bottom row -->
		                </table>
					</div>
				</div>
		 		<!-- end of "search" screen -->

	        </div> <!-- end of "content" -->
	        
	        <!-- "popup_menu" -->
	        <div id="popup_menu" class="popup_menu hidden">
	        	<div id="popup_menu_container" class="soft_menu_container">
	            	<div class="soft_menu">
						<div id="soft_menu_buttons" class="soft_menu_buttons"></div>
	                </div>
	        	</div>
	        </div> <!-- end of "popup_menu" -->
		</div> <!-- end of "video_container" -->
		
		<div id="terms_popup" class="terms_popup hidden">
	         
			<div class="logo_container"></div>
			 
			<div>
	            <div class="top_controls_container">
					<div id="terms_title" class="top_line_title terms">Terms and Conditions</div>
	            </div> 
	        </div>
			
			<div class="popup_content">				
				<div class="terms_text" id="terms_text"></div>
				<div class="terms_buttons_container">
					<div id="terms_accept">
						<a class="button vibra" href="#" id="terms_btn">
							<div class="button_text" id="terms_accept_text">Accept</div>
						</a>
						<a class="button vibra" href="#" id="terms_exit_btn">
							<div class="button_text" id="terms_exit_text">Exit</div>						
						</a>
					</div>
				</div>
			</div>
		</div>
		
		<div id="screen_flash" class="screen hidden">
		</div>
	</div>	

	<div id="screen_mv" class="mv_container hidden">
		<div id="mv_offline_logo" class="mv_offline_logo"></div>
		<div id="screen_mv_item">
			<div class="mv_logo_container">
				<div class="mv_logo" id="mv_logo"></div>
			</div>
			<div class="mv_item">
				<div class="mv_item_image">
					<img id="mv_image" scr=""/>
				</div>
				<div class="mv_item_data">
					<div class="mv_scroller">
						<div class="mv_title"></div>
						<div class="mv_subtitle"></div>
					</div>
				</div>
			</div>
		</div>
		<div id="mv_offline_icon" class="mv_offline_icon hidden"></div>
	</div>
	
	<!-- debug indicator, line is for indicators, view is for string output -->
	<div id="debug_line" class="debug_line hidden">
		<span id="batt_info" class="debug_text battery">&nbsp;</span>
		<span id="signal_info" class="debug_text signal">&nbsp;</span>
		<span id="network_info" class="debug_text anthena">&nbsp;</span>
		<span id="video_info" class="debug_text video hidden">&nbsp;</span>
	</div>
	<div id="debug_view" class="debug hidden"></div>
	<!-- end of debug indicator -->

	<!-- The sysinfo plugin is used to trigger vibra feedback; other system information go over Platform Services -->
	<div id="sysinfo_container"></div>
	  
	</div>
    </body>
</html>